<template>
    <div class="sponsor">
        <Top title="发帖" iconShow="1"></Top>
        <div class="sponsor-content">
            <div class="sponsor-content-title">
                <input type="text" placeholder="请输入标题(6~30个字符)" v-model="title">
            </div>
            <p class="sponsor-hint">来吧，尽情发挥吧</p>
            <!-- <p class="sponsor-face" @click="showFaceKeyboard">
              <img src="/static/img/face/biaoqing@2x.png" alt="">
            </p> -->
            <div class="sponsor-content-artical">
                <textarea placeholder="请输入内容" v-model="content"></textarea>
            </div>
            <article class="add-img-content">
                <ul class="img-list">
                    <li class="img-list-item" v-for="(item,index) in imgList" :key="index">
                        <img src="../../../../static/img/delete.png" class="delete-btn" @click="deleteImg(index)" alt="">
                        <img :src="item.src" class="img-list-item-container" alt="">
                    </li>
                    <li class="img-list-item add-border" v-if="!isFull">
                      <label for="imgInp">
                        <img src="../../../../static/img/tianjia.png" class="img-list-item-add" alt="">
                      </label>
                    </li>
                </ul>
            </article>  
            <mt-button type="primary" @click="submit">发帖</mt-button>
        </div>
            <mt-popup v-model="isFaceKeyboard" position="bottom" class="mint-popup-4" :closeOnClickModal="true" style="">
    </mt-popup>
      <input type="file" id="imgInp" class="input-file" name="zm" accept="image/*" @change="submitImg()">   
      <img src="" id="transform" alt=""> 
    </div>
</template>
<script>
import Vue from 'vue'
import "../../../js/lib/flexble.js";
import bus from "../../../js/lib/bus.js";
import commons from "../../../common/js/common.js";
import AddPost from "../../../components/AddImg";
import Top from "components/Header/Header";
import Foot from "components/Footer/Footer";
import { Toast, MessageBox,Indicator } from "mint-ui";
export default {
  name: "sponsor",
  components: { Top },
  mixins: [AddPost],
  data() {
    return {
      title: "",
      content: "",
      isFull: false,
      isFaceKeyboard: false,
      imgList: [],
      base64List: [],
      urlList: []
    };
  },
  created() {
    let vm = this;
    bus.$on("imgRes", res => {
      vm.addImg(res);
    });
  },
  mounted() {
    Vue.http.interceptors.push((request, next) => { //请求拦截器
      //请求前
      request.headers.set('token', commons.getCookie('token')); //设置请求头
      Indicator.open('加载中...'); //请求loading
      next((response) => {
        //请求后
        Indicator.close(); //隐藏loading
        return response
      })
    })
    //document.setTitle("发帖");
  },
  methods: {
    showFaceKeyboard() {
      this.isFaceKeyboard = true;
    },
    deleteImg(idx) {
      let list = this.imgList,
        newList = new Array();
      if (list.length == 4) {
        for (let i in list) {
          if (i != idx) {
            newList.push(list[i]);
          }
        }
        this.isFull = false;
      } else {
        for (let i in list) {
          if (i != idx) {
            newList.push(list[i]);
          }
        }
      }
      this.imgList = newList;
    },
    addImg(res) {
      if (this.imgList.length < 3) {
        this.imgList.push(res);
      } else if (this.imgList.length == 3) {
        this.isFull = true;
        this.imgList.push(res);
      }
    },
    postImages(fn) {
      let list = this.imgList.map(item => {
        return item.base64;
      }),token = commons.getCookie('token');

      // TUDO
      this.$http
        .post(
          "/loansupermarket-app/post/Hadds",
          JSON.stringify({ token, comment_url: list })
        )
        .then(res => {
          let resBody = res.body;
          if (resBody.code && resBody.code == "000") {
            this.urlList = this.resBody.data.map(item => {
              return item.fullPath;
            });
            fn(this.urlList);
          } else {
            MessageBox.alert(resBody.mesg);
          }
        });
    },
    submit() {
      var token = commons.getCookie('token');
      var postData = {
        title: this.title,
        token: token,
        content: this.content,
        comment_url: this.urlList
      };
      if (postData.title.length < 6 || postData.title.length > 30) {
        MessageBox.alert("标题的长度应为6~30个字符~");
        return;
      } else if (postData.content.length <= 0 ||postData.content.length > 600 ) {
        MessageBox.alert("内容的长度少于600个字符且不能为空~");
        return;
      } else {
        let list = this.imgList.map(item => {
          return item.base64;
        });
        this.$http .post( "/loansupermarket-app/post/Hadds",
             JSON.stringify({ comment_url: list })
          )
          .then(res => {
            var resBody = res.body;
            var comment_urls = "";
            if (resBody.code && resBody.code == "000") {
              for (var i = 0; i < resBody.data.length; i++) {
                if (i != resBody.data.length - 1) {
                  comment_urls += resBody.data[i].storeName + ",";
                } else {
                  comment_urls += resBody.data[i].storeName;
                }
              }
              postData.comment_url = comment_urls;
              this.$http
                .post("/loansupermarket-app/post/add", postData)
                .then(function(response) {
                  var resBody = response.body;
                  if (resBody.code == "000") {
                    Toast({
                      message: "发帖成功",
                      iconClass: "iconfont icon-guanggaolanyouhua02"
                    });
                    setTimeout(() => {
                      // this.$router.go(-1);
                      window.history.go(-1);
                    }, 500);
                  } else if (resBody.code == "444") {
                    // this.$router.push({
                    //   path: "/login",
                    //   query: { history: 1 }
                    // });
                    window.location.href=commons.paths+'/user/login.html?history=1';
                  } else {
                    MessageBox.alert(resBody.mesg);
                  }
                });
            } else {
              MessageBox.alert(resBody.mesg);
            }
          });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
@import "../../../scss/base.scss";
.mint-popup-4,
.picker-item {
  width: 100%;
  backface-visibility: hidden;
}

.sponsor {
  margin-top: 1.2rem;
  text-align: left;
  &-hint {
    height: 1.1rem;
    line-height: 1.1rem;
    color: $iconColor;
    float: left;
  }
  &-face {
    float: right;
    height: 1.1rem;
    img {
      display: block;
      margin-top: 0.2rem;
      width: 0.7rem;
    }
  }
  &-content {
    width: 100%;
    box-sizing: border-box;
    padding: 0.4rem;
    &-title {
      input {
        width: 100%;
        height: 1.33rem;
        line-height: 0.6rem;
        border: none;
        outline: none;
        box-sizing: border-box;
        padding: 0 0.4rem;
        border-radius: 0.12rem;
        font-size: 0.4rem;
      }
    }
    &-artical {
      textarea {
        width: 100%;
        height: 6.47rem;
        line-height: 0.6rem;
        border: none;
        outline: none;
        box-sizing: border-box;
        padding: 0.4rem 0.4rem;
        border-radius: 0.12rem;
        resize: none;
        font-size: 0.4rem;
      }
    }
    .mint-button {
      width: 100%;
      height: 1.2rem;
      line-height: 1.2rem;
      box-shadow: none;
      margin-top: 0.8rem;
    }
  }
}
.add-img-content {
  margin-top: 0.4rem;
  .img-list {
    &-item {
      box-sizing: border-box;
      width: 25%;
      height: 2.2rem;
      float: left;
      display: block;
      overflow: hidden;
      .delete-btn {
        width: 0.5rem;
        margin-right: 6%;
        float: right;
        position: relative;
        z-index: 999;
      }
      &-container {
        width: 95%;
        height: 2.2rem;
        margin-top: -0.5rem;
        position: relative;
        z-index: 0;
      }
      &-add {
        width: 95%;
      }
    }
  }
}
.input-file {
  display: none;
}
</style>
